<template>
    <div style="background-color: white">
        <el-container style="text-align: center;margin: 50px auto;padding: 50px;width: 1000px">
            <el-aside width="223px">
                <!--用户基本信息-->
                <div>
                    <img style="width: 100px" src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_300,h_400/f147a621/group61/M00/0A/A5/CmQUOF1NKwKEcgUuAAAAADPS7Vo882944051.png" alt="">
                    <p class="fontstyle" style="font-size: 18px;">我是老八</p>
                    <p style="line-height: 40px;font-size: 15px;color: #ec771b">余额：0阅饼 | 0代金券</p>
                </div>
                <!--用户的操作-->
                <div class="userOperation">
                    <ul>
                        <li><a href="/user_center">我的图书</a> </li>
                        <li><a href="/user_center/skype">充值</a></li>
                        <li><a href="/user_center/skypelist">充值记录</a></li>
                    </ul>
                </div>
                <!--购买-->
                <div style="margin-top: 50px">
                    <h2 style="text-align: left;border-bottom: 2px solid #ec771b;color:#ec771b;font-weight:normal">他们购买了</h2>
                    <div style="margin-top: 10px">
                        <div>
                            <img width="100px" src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_156,h_208,q_100/da3637c4/group6/M00/E7/EC/CmQUNlsLwkaECSEsAAAAAJOpcg0715902694.jpg?v=oMXJSqI4&t=CmQUNl6Iu9M." alt="">
                        </div>
                        <div>
                            <p>百年孤独</p>
                            <p>作者：马尔克斯</p>
                            <p>类型：</p>
                            <el-button size="mini" round >购买</el-button>
                        </div>
                    </div>
                </div>
            </el-aside>
            <el-main>
                <router-view/>
                <div  style="background-color: #9e9e9e">
                    <p class="kfTitle">联系客服</p>
                    <!-- <div class="kfBox fl kfqq">
                        <p>用户反馈：<a href="">点此进入</a></p>
                        <p class="chat cf"><span class="fl">客服QQ：</span><a href="" class="fl"></a></p>
                    </div> -->
                    <div>
                        <p>客服邮箱：<strong>kefu@zhangyue.com</strong></p>
                        <p class="kfTime">(周一到周五8:00-24:00) (周六、周日9:00-24:00)</p>
                    </div>
                    <div>
                        <p>客服电话：<strong>400-881-3311</strong></p>
                        <p class="kfTime">(8:00-22:00)</p>
                    </div>
                </div>
            </el-main>

        </el-container>

    </div>
</template>

<script>
    export default {
        name: '',
        components: {},
        props: {},
        data() {
            return {}
        },
        computed: {},
        watch: {},
        methods: {},
        created() {
        },
        mounted() {
        },
    }

</script>

<style scoped>
    .fontstyle {
        font-family: "微软雅黑 Light"  ;
        color: gold;
    }
    .userOperation ul{
        background: #efede9;
    }
    .userOperation ul li a{
        display: inline-block;
        width: 100%;
        height: 100%;
        color: #000;
        font-size: 16px;
        text-align: center;
    }
    .userOperation ul li {
        height: 52px;
        line-height: 52px;
    }
    li a:hover {
        background: #e1ded9;
        color: #000 !important;
    }
</style>

